<template>
  <div class="supplier-evaluation-page">
    <div class="page-header">
      <h2>供应商评估与分级管理</h2>
      <div class="header-actions">
        <el-button type="primary" icon="Plus" @click="showEvaluationDialog = true">新增评估</el-button>
        <el-button icon="Download">导出报告</el-button>
      </div>
    </div>

    <!-- 评估概览 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :span="6">
        <div class="stat-card">
          <div class="stat-icon" style="background: #e8f4ff">
            <el-icon color="#409eff" :size="24"><OfficeBuilding /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ stats.totalSuppliers }}</div>
            <div class="stat-label">供应商总数</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="stat-card">
          <div class="stat-icon" style="background: #fff5e8">
            <el-icon color="#fa8c16" :size="24"><Medal /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ stats.excellentSuppliers }}</div>
            <div class="stat-label">优秀供应商</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="stat-card">
          <div class="stat-icon" style="background: #e8fff3">
            <el-icon color="#52c41a" :size="24"><TrendCharts /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ stats.avgScore }}</div>
            <div class="stat-label">平均评分</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="stat-card">
          <div class="stat-icon" style="background: #fff0f0">
            <el-icon color="#ff4d4f" :size="24"><Warning /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ stats.riskSuppliers }}</div>
            <div class="stat-label">风险供应商</div>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 主内容 -->
    <el-card class="main-card">
      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
        <!-- 供应商列表 -->
        <el-tab-pane label="供应商分级" name="grading">
          <el-form :inline="true" :model="filterForm" class="filter-form">
            <el-form-item label="供应商名称">
              <el-input v-model="filterForm.name" placeholder="请输入供应商名称" clearable />
            </el-form-item>
            <el-form-item label="供应商等级">
              <el-select v-model="filterForm.grade" placeholder="请选择等级" clearable>
                <el-option label="A级（优秀）" value="A" />
                <el-option label="B级（良好）" value="B" />
                <el-option label="C级（合格）" value="C" />
                <el-option label="D级（不合格）" value="D" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Search" @click="handleSearch">搜索</el-button>
              <el-button icon="Refresh" @click="handleReset">重置</el-button>
            </el-form-item>
          </el-form>

          <el-table :data="supplierList" stripe>
            <el-table-column prop="name" label="供应商名称" width="200" />
            <el-table-column prop="grade" label="供应商等级" width="120" align="center">
              <template #default="{ row }">
                <el-tag :type="getGradeType(row.grade)" size="large">{{ row.grade }}级</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="score" label="综合评分" width="120" align="center">
              <template #default="{ row }">
                <el-tag :type="getScoreType(row.score)" size="large">{{ row.score }}分</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="qualityScore" label="质量评分" width="100" align="center">
              <template #default="{ row }">
                <el-progress :percentage="row.qualityScore" :color="getProgressColor(row.qualityScore)" />
              </template>
            </el-table-column>
            <el-table-column prop="deliveryScore" label="交付评分" width="100" align="center">
              <template #default="{ row }">
                <el-progress :percentage="row.deliveryScore" :color="getProgressColor(row.deliveryScore)" />
              </template>
            </el-table-column>
            <el-table-column prop="serviceScore" label="服务评分" width="100" align="center">
              <template #default="{ row }">
                <el-progress :percentage="row.serviceScore" :color="getProgressColor(row.serviceScore)" />
              </template>
            </el-table-column>
            <el-table-column prop="cooperationYears" label="合作年限" width="100" align="center">
              <template #default="{ row }">
                {{ row.cooperationYears }}年
              </template>
            </el-table-column>
            <el-table-column prop="totalOrders" label="订单总数" width="100" align="center" />
            <el-table-column prop="lastEvaluationDate" label="最近评估" width="120" />
            <el-table-column label="操作" width="280" fixed="right">
              <template #default="{ row }">
                <el-button link type="primary" @click="viewDetail(row)">详情</el-button>
                <el-button link type="success" @click="evaluate(row)">评估</el-button>
                <el-button link type="warning" @click="viewHistory(row)">历史</el-button>
                <el-button link type="info" @click="viewReport(row)">报告</el-button>
              </template>
            </el-table-column>
          </el-table>

          <div class="pagination">
            <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :total="total"
              :page-sizes="[10, 20, 50, 100]"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-tab-pane>

        <!-- 评估指标 -->
        <el-tab-pane label="评估指标" name="indicators">
          <el-button type="primary" icon="Plus" @click="showIndicatorDialog = true" style="margin-bottom: 15px">
            添加指标
          </el-button>

          <el-table :data="indicatorList" stripe border>
            <el-table-column prop="category" label="指标类别" width="120">
              <template #default="{ row }">
                <el-tag>{{ row.category }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="指标名称" width="180" />
            <el-table-column prop="weight" label="权重" width="100" align="center">
              <template #default="{ row }">
                {{ row.weight }}%
              </template>
            </el-table-column>
            <el-table-column prop="evaluationMethod" label="评估方法" width="180" />
            <el-table-column prop="gradeA" label="A级标准" width="120" />
            <el-table-column prop="gradeB" label="B级标准" width="120" />
            <el-table-column prop="gradeC" label="C级标准" width="120" />
            <el-table-column prop="gradeD" label="D级标准" width="120" />
            <el-table-column label="操作" width="180" fixed="right">
              <template #default="{ row }">
                <el-button link type="primary" @click="editIndicator(row)">编辑</el-button>
                <el-button link type="danger" @click="deleteIndicator(row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <!-- 评估记录 -->
        <el-tab-pane label="评估记录" name="records">
          <el-table :data="evaluationRecords" stripe>
            <el-table-column prop="supplierName" label="供应商" width="200" />
            <el-table-column prop="evaluationDate" label="评估日期" width="120" />
            <el-table-column prop="evaluator" label="评估人" width="100" />
            <el-table-column prop="score" label="总分" width="100" align="center">
              <template #default="{ row }">
                <el-tag :type="getScoreType(row.score)">{{ row.score }}分</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="grade" label="评级" width="100" align="center">
              <template #default="{ row }">
                <el-tag :type="getGradeType(row.grade)">{{ row.grade }}级</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="qualityScore" label="质量" width="80" align="center" />
            <el-table-column prop="deliveryScore" label="交付" width="80" align="center" />
            <el-table-column prop="serviceScore" label="服务" width="80" align="center" />
            <el-table-column prop="priceScore" label="价格" width="80" align="center" />
            <el-table-column prop="status" label="状态" width="100">
              <template #default="{ row }">
                <el-tag :type="getStatusType(row.status)">{{ row.status }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="200" fixed="right">
              <template #default="{ row }">
                <el-button link type="primary" @click="viewEvaluationDetail(row)">查看</el-button>
                <el-button link type="success" @click="exportEvaluation(row)">导出</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <!-- 改进计划 -->
        <el-tab-pane label="改进计划" name="improvement">
          <el-button type="primary" icon="Plus" @click="showImprovementDialog = true" style="margin-bottom: 15px">
            新增改进计划
          </el-button>

          <el-table :data="improvementList" stripe>
            <el-table-column prop="supplierName" label="供应商" width="200" />
            <el-table-column prop="issue" label="问题描述" min-width="200" show-overflow-tooltip />
            <el-table-column prop="improvementPlan" label="改进措施" min-width="200" show-overflow-tooltip />
            <el-table-column prop="responsible" label="负责人" width="100" />
            <el-table-column prop="deadline" label="完成期限" width="120" />
            <el-table-column prop="progress" label="进度" width="150" align="center">
              <template #default="{ row }">
                <el-progress :percentage="row.progress" />
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" width="100">
              <template #default="{ row }">
                <el-tag :type="getImprovementStatusType(row.status)">{{ row.status }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="200" fixed="right">
              <template #default="{ row }">
                <el-button link type="primary" @click="viewImprovementDetail(row)">详情</el-button>
                <el-button link type="success" @click="updateProgress(row)">更新进度</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <!-- 数据分析 -->
        <el-tab-pane label="数据分析" name="analysis">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-card>
                <template #header>
                  <span>供应商等级分布</span>
                </template>
                <div class="chart-container">
                  <div style="text-align: center; padding: 80px 0; color: #909399">
                    供应商等级分布饼图
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="12">
              <el-card>
                <template #header>
                  <span>评分趋势分析</span>
                </template>
                <div class="chart-container">
                  <div style="text-align: center; padding: 80px 0; color: #909399">
                    供应商评分趋势图
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>

          <el-row :gutter="20" style="margin-top: 20px">
            <el-col :span="24">
              <el-card>
                <template #header>
                  <span>各指标得分对比</span>
                </template>
                <div class="chart-container">
                  <div style="text-align: center; padding: 80px 0; color: #909399">
                    各指标得分雷达图
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <!-- 新增评估对话框 -->
    <el-dialog v-model="showEvaluationDialog" title="供应商评估" width="800px">
      <el-form :model="evaluationForm" label-width="120px">
        <el-form-item label="供应商">
          <el-select v-model="evaluationForm.supplierId" placeholder="请选择供应商" filterable>
            <el-option
              v-for="supplier in supplierList"
              :key="supplier.id"
              :label="supplier.name"
              :value="supplier.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="评估日期">
          <el-date-picker
            v-model="evaluationForm.evaluationDate"
            type="date"
            placeholder="选择日期"
          />
        </el-form-item>

        <el-divider content-position="left">评估指标</el-divider>

        <el-form-item label="质量评分">
          <el-slider v-model="evaluationForm.qualityScore" :marks="{ 0: '0', 50: '50', 100: '100' }" />
        </el-form-item>
        <el-form-item label="交付评分">
          <el-slider v-model="evaluationForm.deliveryScore" :marks="{ 0: '0', 50: '50', 100: '100' }" />
        </el-form-item>
        <el-form-item label="服务评分">
          <el-slider v-model="evaluationForm.serviceScore" :marks="{ 0: '0', 50: '50', 100: '100' }" />
        </el-form-item>
        <el-form-item label="价格评分">
          <el-slider v-model="evaluationForm.priceScore" :marks="{ 0: '0', 50: '50', 100: '100' }" />
        </el-form-item>
        <el-form-item label="评估说明">
          <el-input
            v-model="evaluationForm.description"
            type="textarea"
            :rows="4"
            placeholder="请输入评估说明"
          />
        </el-form-item>
        <el-form-item label="改进建议">
          <el-input
            v-model="evaluationForm.suggestion"
            type="textarea"
            :rows="3"
            placeholder="请输入改进建议"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showEvaluationDialog = false">取消</el-button>
        <el-button type="primary" @click="handleEvaluationSubmit">确定</el-button>
      </template>
    </el-dialog>

    <!-- 添加指标对话框 -->
    <el-dialog v-model="showIndicatorDialog" title="添加评估指标" width="700px">
      <el-form :model="indicatorForm" label-width="100px">
        <el-form-item label="指标类别">
          <el-select v-model="indicatorForm.category" placeholder="请选择类别">
            <el-option label="质量指标" value="quality" />
            <el-option label="交付指标" value="delivery" />
            <el-option label="服务指标" value="service" />
            <el-option label="价格指标" value="price" />
          </el-select>
        </el-form-item>
        <el-form-item label="指标名称">
          <el-input v-model="indicatorForm.name" placeholder="请输入指标名称" />
        </el-form-item>
        <el-form-item label="权重">
          <el-input-number v-model="indicatorForm.weight" :min="1" :max="100" />
          <span style="margin-left: 10px">%</span>
        </el-form-item>
        <el-form-item label="评估方法">
          <el-input v-model="indicatorForm.evaluationMethod" placeholder="请输入评估方法" />
        </el-form-item>
        <el-form-item label="A级标准">
          <el-input v-model="indicatorForm.gradeA" placeholder="如：≥90分" />
        </el-form-item>
        <el-form-item label="B级标准">
          <el-input v-model="indicatorForm.gradeB" placeholder="如：80-89分" />
        </el-form-item>
        <el-form-item label="C级标准">
          <el-input v-model="indicatorForm.gradeC" placeholder="如：60-79分" />
        </el-form-item>
        <el-form-item label="D级标准">
          <el-input v-model="indicatorForm.gradeD" placeholder="如：<60分" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showIndicatorDialog = false">取消</el-button>
        <el-button type="primary" @click="handleIndicatorSubmit">确定</el-button>
      </template>
    </el-dialog>

    <!-- 改进计划对话框 -->
    <el-dialog v-model="showImprovementDialog" title="新增改进计划" width="600px">
      <el-form :model="improvementForm" label-width="100px">
        <el-form-item label="供应商">
          <el-select v-model="improvementForm.supplierId" placeholder="请选择供应商" filterable>
            <el-option
              v-for="supplier in supplierList"
              :key="supplier.id"
              :label="supplier.name"
              :value="supplier.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="问题描述">
          <el-input
            v-model="improvementForm.issue"
            type="textarea"
            :rows="3"
            placeholder="请输入问题描述"
          />
        </el-form-item>
        <el-form-item label="改进措施">
          <el-input
            v-model="improvementForm.improvementPlan"
            type="textarea"
            :rows="3"
            placeholder="请输入改进措施"
          />
        </el-form-item>
        <el-form-item label="负责人">
          <el-input v-model="improvementForm.responsible" placeholder="请输入负责人" />
        </el-form-item>
        <el-form-item label="完成期限">
          <el-date-picker
            v-model="improvementForm.deadline"
            type="date"
            placeholder="选择日期"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showImprovementDialog = false">取消</el-button>
        <el-button type="primary" @click="handleImprovementSubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 统计数据
const stats = reactive({
  totalSuppliers: 85,
  excellentSuppliers: 28,
  avgScore: 82.5,
  riskSuppliers: 5
})

// 当前标签页
const activeTab = ref('grading')

// 筛选表单
const filterForm = reactive({
  name: '',
  grade: ''
})

// 供应商列表
const supplierList = ref([
  {
    id: 1,
    name: '深圳富士康科技集团',
    grade: 'A',
    score: 92,
    qualityScore: 95,
    deliveryScore: 90,
    serviceScore: 91,
    cooperationYears: 5,
    totalOrders: 256,
    lastEvaluationDate: '2025-01-10'
  },
  {
    id: 2,
    name: '比亚迪供应链有限公司',
    grade: 'A',
    score: 88,
    qualityScore: 90,
    deliveryScore: 88,
    serviceScore: 86,
    cooperationYears: 3,
    totalOrders: 189,
    lastEvaluationDate: '2025-01-08'
  },
  {
    id: 3,
    name: '立讯精密工业股份',
    grade: 'B',
    score: 78,
    qualityScore: 80,
    deliveryScore: 75,
    serviceScore: 79,
    cooperationYears: 2,
    totalOrders: 145,
    lastEvaluationDate: '2025-01-05'
  }
])

// 评估指标列表
const indicatorList = ref([
  {
    id: 1,
    category: '质量指标',
    name: '产品合格率',
    weight: 30,
    evaluationMethod: '质检数据统计',
    gradeA: '≥98%',
    gradeB: '95%-97%',
    gradeC: '90%-94%',
    gradeD: '<90%'
  },
  {
    id: 2,
    category: '交付指标',
    name: '准时交付率',
    weight: 25,
    evaluationMethod: '交付记录统计',
    gradeA: '≥95%',
    gradeB: '90%-94%',
    gradeC: '85%-89%',
    gradeD: '<85%'
  },
  {
    id: 3,
    category: '服务指标',
    name: '响应及时性',
    weight: 20,
    evaluationMethod: '响应时间记录',
    gradeA: '≤2小时',
    gradeB: '2-4小时',
    gradeC: '4-8小时',
    gradeD: '>8小时'
  },
  {
    id: 4,
    category: '价格指标',
    name: '价格竞争力',
    weight: 15,
    evaluationMethod: '市场价格对比',
    gradeA: '优于市场',
    gradeB: '符合市场',
    gradeC: '略高于市场',
    gradeD: '明显高于市场'
  }
])

// 评估记录
const evaluationRecords = ref([
  {
    id: 1,
    supplierName: '深圳富士康科技集团',
    evaluationDate: '2025-01-10',
    evaluator: '张经理',
    score: 92,
    grade: 'A',
    qualityScore: 95,
    deliveryScore: 90,
    serviceScore: 91,
    priceScore: 88,
    status: '已完成'
  },
  {
    id: 2,
    supplierName: '比亚迪供应链有限公司',
    evaluationDate: '2025-01-08',
    evaluator: '李主管',
    score: 88,
    grade: 'A',
    qualityScore: 90,
    deliveryScore: 88,
    serviceScore: 86,
    priceScore: 87,
    status: '已完成'
  }
])

// 改进计划列表
const improvementList = ref([
  {
    id: 1,
    supplierName: '立讯精密工业股份',
    issue: '交付准时率低于标准，多次延期交付',
    improvementPlan: '优化生产流程，增加产能，建立预警机制',
    responsible: '张经理',
    deadline: '2025-03-31',
    progress: 60,
    status: '进行中'
  },
  {
    id: 2,
    supplierName: '某配件供应商',
    issue: '产品质量不稳定，合格率波动较大',
    improvementPlan: '加强质量控制，实施ISO质量管理体系',
    responsible: '李主管',
    deadline: '2025-04-30',
    progress: 35,
    status: '进行中'
  }
])

// 对话框
const showEvaluationDialog = ref(false)
const showIndicatorDialog = ref(false)
const showImprovementDialog = ref(false)

// 表单
const evaluationForm = reactive({
  supplierId: '',
  evaluationDate: '',
  qualityScore: 80,
  deliveryScore: 80,
  serviceScore: 80,
  priceScore: 80,
  description: '',
  suggestion: ''
})

const indicatorForm = reactive({
  category: '',
  name: '',
  weight: 20,
  evaluationMethod: '',
  gradeA: '',
  gradeB: '',
  gradeC: '',
  gradeD: ''
})

const improvementForm = reactive({
  supplierId: '',
  issue: '',
  improvementPlan: '',
  responsible: '',
  deadline: ''
})

// 分页
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(100)

// 方法
const getGradeType = (grade) => {
  const types = {
    'A': 'success',
    'B': 'primary',
    'C': 'warning',
    'D': 'danger'
  }
  return types[grade] || 'info'
}

const getScoreType = (score) => {
  if (score >= 90) return 'success'
  if (score >= 80) return 'primary'
  if (score >= 60) return 'warning'
  return 'danger'
}

const getProgressColor = (score) => {
  if (score >= 90) return '#67c23a'
  if (score >= 80) return '#409eff'
  if (score >= 60) return '#e6a23c'
  return '#f56c6c'
}

const getStatusType = (status) => {
  return status === '已完成' ? 'success' : 'warning'
}

const getImprovementStatusType = (status) => {
  const types = {
    '进行中': 'warning',
    '已完成': 'success',
    '已延期': 'danger'
  }
  return types[status] || 'info'
}

const handleTabClick = (tab) => {
  console.log('切换标签页', tab.props.name)
}

const handleSearch = () => {
  console.log('搜索', filterForm)
  ElMessage.success('搜索成功')
}

const handleReset = () => {
  Object.keys(filterForm).forEach(key => {
    filterForm[key] = ''
  })
  ElMessage.success('重置成功')
}

const viewDetail = (row) => {
  console.log('查看详情', row)
  ElMessage.info('查看供应商详情')
}

const evaluate = (row) => {
  evaluationForm.supplierId = row.id
  showEvaluationDialog.value = true
}

const viewHistory = (row) => {
  console.log('查看历史', row)
  ElMessage.info('查看评估历史')
}

const viewReport = (row) => {
  console.log('查看报告', row)
  ElMessage.info('查看评估报告')
}

const editIndicator = (row) => {
  Object.assign(indicatorForm, row)
  showIndicatorDialog.value = true
}

const deleteIndicator = (row) => {
  ElMessageBox.confirm('确定要删除该指标吗？', '提示', {
    type: 'warning'
  }).then(() => {
    ElMessage.success('删除成功')
  }).catch(() => {})
}

const viewEvaluationDetail = (row) => {
  console.log('查看评估详情', row)
  ElMessage.info('查看评估详情')
}

const exportEvaluation = (row) => {
  console.log('导出评估', row)
  ElMessage.success('导出成功')
}

const viewImprovementDetail = (row) => {
  console.log('查看改进详情', row)
  ElMessage.info('查看改进计划详情')
}

const updateProgress = (row) => {
  console.log('更新进度', row)
  ElMessage.success('进度更新成功')
}

const handleEvaluationSubmit = () => {
  console.log('提交评估', evaluationForm)
  ElMessage.success('评估提交成功')
  showEvaluationDialog.value = false
}

const handleIndicatorSubmit = () => {
  console.log('提交指标', indicatorForm)
  ElMessage.success('指标添加成功')
  showIndicatorDialog.value = false
}

const handleImprovementSubmit = () => {
  console.log('提交改进计划', improvementForm)
  ElMessage.success('改进计划已创建')
  showImprovementDialog.value = false
}

const handleSizeChange = (val) => {
  pageSize.value = val
}

const handleCurrentChange = (val) => {
  currentPage.value = val
}
</script>

<style scoped lang="scss">
.supplier-evaluation-page {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;

  h2 {
    margin: 0;
    font-size: 24px;
    color: #303133;
  }
}

.stats-row {
  margin-bottom: 20px;
}

.stat-card {
  display: flex;
  align-items: center;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

  .stat-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-right: 15px;
  }

  .stat-content {
    flex: 1;

    .stat-value {
      font-size: 28px;
      font-weight: bold;
      color: #303133;
      margin-bottom: 5px;
    }

    .stat-label {
      font-size: 14px;
      color: #909399;
    }
  }
}

.main-card {
  .filter-form {
    margin-bottom: 20px;
  }

  .pagination {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }

  .chart-container {
    height: 300px;
  }
}
</style>

